<template>
    <div>
        <MoodleTabs :list="tabsList" active="1" />
        <h2>{{ $t('question.index.title') }}</h2>
        <div class="cate-filter">
            <div>
                <el-button color="#f06423" icon="Plus" @click="goPage('/console/question/create')">{{ $t('question.index.add') }}</el-button>
                <el-button color="#f06423" icon="Delete" @click="deleteDialog = true" v-if="checkedQuestionList.length">{{ $t('question.index.delete') }}</el-button>
            </div>
            <el-form-item :label="$t('question.index.category')" size="large">
                <el-tree-select
                    :placeholder="$t('question.index.category_placeholder')"
                    v-model="questionCateId"
                    :data="questionCateList"
                    :render-after-expand="false"
                    :props="quizProps"
                    node-key="id"
                    clearable
                    @change="getQuestionList"
                />
            </el-form-item>
        </div>

        <el-table :data="questionList" stripe style="width: 100%" v-loading="loading" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="30" />
            <el-table-column prop="name" :label="$t('question.index.col_title')">
                <template #default="{ row }">
                    <span class="over-1" v-html="row.question_point"></span>
                </template>
            </el-table-column>
            <el-table-column prop="question_type" :label="$t('question.index.col_type')" width="60">
                <template #default="{ row }">
                    <span>{{ row.question_type === 1 ? $t('question.index.type_single') : $t('question.index.type_multi') }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="question_no" :label="$t('question.index.col_no')" width="140" />
            <el-table-column prop="created_at" :label="$t('question.index.col_created')" width="150" />
            <el-table-column prop="updated_at" :label="$t('question.index.col_updated')" width="150" />
            <el-table-column :label="$t('question.index.col_action')" width="60">
                <template #default="{ row }">
                    <div class="tools-box">
                        <el-icon size="16" color="#000" @click="goPage('questionEdit', { id: row.id })"><Edit /></el-icon>
                        <el-icon size="16" color="#000" @click="addHadnle(row)"><Delete /></el-icon>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-box">
            <el-pagination
                size="small"
                background
                v-model:page-size="pagination.limit"
                v-model:current-page="pagination.page"
                layout="sizes, prev, pager, next"
                :total="pagination.total"
                :page-sizes="[10, 20, 50, 100]"
                class="mt-4"
                :hide-on-single-page="true"
                @size-change="getQuestionList"
                @current-change="getQuestionList"
            />
        </div>
    </div>

    <el-dialog v-model="deleteDialog" :title="$t('question.index.delete_title')" width="400" class="mobile-dialog">
        <p>{{ $t('question.index.delete_confirm') }}</p>
        <template #footer>
            <el-button color="#f06423" @click="confirmHandle" :loading="dialogLoading">{{ $t('golbal.btn_text_4') }}</el-button>
            <el-button color="#435764" @click="deleteDialog = false" :loading="dialogLoading">{{ $t('golbal.btn_text_3') }}</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

import MoodleTabs from '@/components/MoodleTabs.vue'

import QuestionService from '@/api/question'
import type { CateItem, QuestionItem } from '@/types/question'

import { goPage } from '@/utils/global'
import type { Pagination } from '@/types/global'

const loading = ref(false)
const tabsList = ref([
    {
        text: 'question.index.tab_question',
        value: '1',
        link: `/console/question`,
    },
    {
        text: 'question.index.tab_category',
        value: '2',
        link: `/console/question/category`,
    },
    // {
    //     text: 'question.index.tab_import',
    //     value: '3',
    //     link: ``,
    // },
    // {
    //     text: 'question.index.tab_export',
    //     value: '4',
    //     link: ``,
    // },
])

// 题库分类列表
const questionCateList = ref<CateItem[]>([])
const questionCateId = ref<number>()
const quizProps = {
    id: 'id',
    children: 'children',
    label: 'name',
}
function getQuestionCateList() {
    QuestionService.cateList().then(res => {
        questionCateList.value = res.items
    })
}

// 题目列表
const questionList = ref<QuestionItem[]>([])
const checkedQuestionList = ref<QuestionItem[]>([])
const pagination = ref<Pagination>({
    page: 1,
    limit: 10,
    total: 10,
})
function getQuestionList() {
    loading.value = true
    QuestionService.list(pagination.value, questionCateId.value)
        .then(res => {
            questionList.value = res.items
            pagination.value.total = res.pagination.total
        })
        .finally(() => {
            loading.value = false
        })
}
const handleSelectionChange = (val: QuestionItem[]) => {
    checkedQuestionList.value = val
}
const addHadnle = (row: QuestionItem) => {
    checkedQuestionList.value = [row]
    deleteDialog.value = true
}

// 刪除彈窗
const deleteDialog = ref(false)
const dialogLoading = ref(false)
const confirmHandle = () => {
    deleteDialog.value = false
    dialogLoading.value = true
    QuestionService.delete(checkedQuestionList.value.map(item => item.id))
        .then(() => {
            getQuestionList()
            checkedQuestionList.value = []
        })
        .finally(() => {
            dialogLoading.value = false
        })
}

onMounted(() => {
    getQuestionCateList()
    getQuestionList()
})
</script>

<style lang="less" scoped>
h2 {
    margin-bottom: 30px;
    font-size: 30px;
    font-weight: normal;
    line-height: 1.2;
    color: #000;
}

.cate-filter {
    display: flex;
    justify-content: space-between;

    .el-select {
        width: 300px;
    }
}

.tools-box {
    display: flex;
    align-items: center;
    gap: 10px;

    .el-icon {
        cursor: pointer;

        &:hover {
            color: #f06423;
        }
    }
}
</style>
